import * as echarts from "echarts";

// 词云图表
export const wordCloudChart = (id) => {
  const baseData = [
    { name: "Vue", value: 100 },
    { name: "React", value: 80 },
    { name: "Angular", value: 60 },
    { name: "Ember", value: 40 },
    { name: "Svelte", value: 20 },
  ];

  // 随机颜色
  const randcolor = () => {
    let r = 100 + ~~(Math.random() * 100);
    let g = 135 + ~~(Math.random() * 100);
    let b = 100 + ~~(Math.random() * 100);
    return `rgb(${r}, ${g}, ${b})`;
  };

  const option = {
    backgroundColor: "rgba(0,0,0,.5)",
    tooltip: {
      trigger: "item",
      padding: [10, 15],
      textStyle: {
        fontSize: 20,
      },
      formatter: (params) => {
        const { name, value } = params;

        return `
                    平台：${name} <br/>
                    数量：${value}
                `;
      },
    },
    series: [
      {
        type: "wordCloud",
        gridSize: 20,
        sizeRange: [12, 50],
        rotationRange: [0, 0],
        shape: "circle",
        textStyle: {
          normal: {
            color: (params) => {
              return randcolor();
            },
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        data: baseData,
      },
    ],
  };

  const client = document.getElementById(id);
  let myChart = echarts.init(client);
  const clientWidth = client.clientWidth;
  myChart.clear();
  myChart.resize({ width: clientWidth });
  myChart.setOption(option);

  return myChart;
};
